<template>
    <div class="wrapper">
        <Upload :onComplete="fileonComplete">
            <div class="showImageWrapper">
                <div class="currentImage">
                    <img
                            v-if="getStore('design.designItem').image.url"
                            :src="getStore('design.designItem').image.url+`?imageView2/1/w/${Math.round(getStore('design.designItem').width*300/1000)}/h/${Math.round(getStore('design.designItem').height*300/1000)}`"
                    />
                </div>
                <div class="iconImage">
                    <img src="http://lc-hsgiqtbn.cn-n1.lcfile.com/3f171ab9c78d29d399c0.png" alt=""/>
                </div>
            </div>
        </Upload>
        <div class="desc">
            <h3>提示</h3>
            <div>
                <p>
                    1.拖住或点击上传
                </p>
                <p>
                    2.图片会根据1000x1000像素等比例显示
                </p>
            </div>
        </div>
    </div>
</template>
<script>
    import Upload from '../../components/upload'
    import withStore from "../../vuex/withStore";

    export default withStore({
        data() {
            return {}
        },
        components: {
            Upload
        },
        methods: {
            fileonComplete: function (imageResults) {
                if (imageResults.length != 0 && imageResults[0].objectId) {
                    var designItem = this.getStore("design.designItem")
                    /*下一步*/
                    this.setStore("design.designItem", {
                        ...designItem,
                        status: 2,
                        ...imageResults[0]
                    })
                    this.$router.replace("/design/edit")
                }
            }
        }
    })
</script>
<style lang="less" scoped>
    .wrapper {
        .showImageWrapper {
            position: relative;
            height: 300px;
            width: 100%;
            .currentImage {
                position: absolute;
                top: px2rem(20);
                left: px2rem(100);
                height: 300px;
                width: 300px;
                border: 2px dashed #eee;
                img {
                    max-width: 100%;
                    max-height: 100%;
                }
            }
            .iconImage {
                position: absolute;
                top: px2rem(150);
                left: px2rem(150);
                height: 300px;
                width: 300px;
                img {
                    max-width: 100%;
                    max-height: 100%;
                }
            }

        }

        .desc {
            margin-top: 100px;
            h3 {
                font-weight: 600;
            }
            padding-left: px2rem(50);
            padding-right: px2rem(50);
        }
    }
</style>